<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="活动名称">
            <el-input v-model="search.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="拥有者">
            <el-select v-model="search.owner" placeholder="拥有者">
                <el-option label="--请选择--" value=""></el-option>
                <el-option v-for="item in users" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="开始日期">
            <el-date-picker
                    v-model="search.startDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择开始日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
            <el-date-picker
                    v-model="search.endDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initData">查询</el-button>
        </el-form-item>
    </el-form>
    <el-button type="success" @click="openDialog()">添加</el-button>
    <el-button type="danger" @click="del()">批量删除</el-button>
    <el-table
            :data="activitys"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                fixed
                prop="name"
                label="活动名称"
                width="150">
        </el-table-column>
        <el-table-column
                prop="ownerUser.name"
                label="拥有者"
                width="120">
        </el-table-column>
        <el-table-column
                prop="startDate"
                label="开始日期"
                width="120">
        </el-table-column>
        <el-table-column
                prop="endDate"
                label="结束日期"
                width="120">
        </el-table-column>

        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-button @click="toDetail(scope.row.id)" type="text" size="small">详情</el-button>
                <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="openDialog(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--修改/添加市场活动的弹框-->
    <el-dialog title="市场活动" :visible.sync="dialogFormVisible">
        <el-form :model="activity">
            <el-form-item label="拥有者" :label-width="formLabelWidth">
                <el-select v-model="activity.owner" placeholder="拥有者">
                    <el-option label="--请选择--" value=""></el-option>
                    <el-option  v-for="item in users" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动名称" :label-width="formLabelWidth">
                <el-input v-model="activity.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="activity.startDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="activity.endDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="成本" :label-width="formLabelWidth">
                <el-input v-model="activity.cost" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="activity.description"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveActivity">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            dialogFormVisible: false,
            formLabelWidth: '120px',
            activity:{//修改/添加活动对象
                id:undefined,
                owner:undefined,
                name:undefined,
                startDate:undefined,
                endDate:undefined,
                cost:undefined,
                description:undefined,
                createBy:undefined,
                editBy:undefined
            },
            search:{//搜索条件
               name:undefined,
               owner:undefined,
               startDate:undefined,
               endDate:undefined
            },
            users:[],//所有的拥有者-->所有的用户
            activitys:[],
            pageNum:1,
            pageSize:5,
            total:undefined,
            multipleSelection:[]  //选中的行数据
        },
        methods: {
            toDetail(id){//跳转详情页面
                sessionStorage.setItem("activityId",id)
                location.href='detail.html'
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            del(id){//删除
                let idArr=[];
                if (id){//单个删除
                    idArr.push(id)
                }else{//批量删除
                    this.multipleSelection.forEach(item=>{
                        idArr.push(item.id);
                    })
                }

                if (idArr.length==0){
                    this.$message({
                        type:"warning",
                        message: "至少选中一条数据删除"
                    });
                    return;
                }

                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/activity?ids=${idArr.join(",")}`).then(resp=>{
                        let data=resp.data;
                        if(data.code==200){
                            this.$message({
                                type:"success",
                                message: "删除成功"
                            });
                            //刷新表格数据
                            this.initData();
                        }else{
                            this.$message({
                                type:"error",
                                message: data.msg
                            });
                        }
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            openDialog(act){//打开弹框
                this.dialogFormVisible=true;
                let user=JSON.parse(sessionStorage.getItem("user"))
                if (act){//修改
                    this.activity={...act}
                    //修改人
                    this.activity.editBy=user.id;
                }else{//添加
                    this.activity={
                            id:undefined,
                            owner:undefined,
                            name:undefined,
                            startDate:undefined,
                            endDate:undefined,
                            cost:undefined,
                            description:undefined,
                            createBy:undefined,
                            editBy:undefined
                    };
                    //创建人
                    this.activity.createBy=user.id;
                }
            },
            saveActivity(){//点击保存按钮
                axios({
                    method:this.activity.id?"put":"post",
                    url:"/activity",
                    data:this.activity
                }).then(resp=>{
                    let data=resp.data;
                    if (data.code==200){
                        this.$message({
                            message:"操作成功",
                            type:"success"
                        });
                        //刷新表格数据
                        this.initData();
                        //隐藏弹框
                        this.dialogFormVisible=false
                    }
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.initData();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val;
                this.initData();
            },
            initData(){//获取表格数据
                axios.get("/activity",{params:{
                        pageNum:this.pageNum,
                        pageSize: this.pageSize,
                        ...this.search
                    }}).then(resp=>{
                        let data=resp.data;
                        this.activitys=data.result;
                        this.total=data.count
                })
            },
            getAllUser(){//获取所有的用户,拥有者
                axios.get("/user").then(resp=>{
                    let data=resp.data;
                    this.users=data.result
                })
            }
        },
        created(){
            this.initData();
            this.getAllUser()//获取所有的用户,拥有者
        }
    })
</script>
</body>
</html>